<template>
	<view class="">
		<view class="servicelist" v-if="list1.length">
			<view class="item" :key="item.id" v-for="item in list1"  @click="navTo(item)">
				<view class="top">
					<view class="left">
						<image :src="item.image" mode=""></image>
						{{item.name}}
					</view>
					<view class="right">

						<text class="text0">会员价¥{{item.vip_price}}</text>
						<text class="text1">/¥{{item.price}}</text>

					</view>
				</view>
				<view class="bot">
					<view class="left">
						{{item.remark}}
					</view>
					<view class="right">

						<u-button  @click="navTo(item)" shape="circle" type="primary" :ripple="true" ripple-bg-color="#909399">立即咨询</u-button>

					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty src="https://zzdiy-prod.oss-cn-chengdu.aliyuncs.com/zzdiy_seller/empty.png" icon-size="300"
					text="暂无数据" mode="data"></u-empty>
			</view>
		</view>

	</view>

</template>
<script>
	export default {

		data() {
			return {
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				},
				status: "more",
				senDate: false,
				list1: [],

			}
		},
		onShow() {
			this.formData.page=1;
			this.list1=[];
			this.getmoldList()
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
				this.getmoldList()
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},


		methods: {
			getmoldList() {
				this.senDate = false;
				let query = {
					page: this.formData.page,
					limit: this.formData.pageSize,
				}

				this.$u.api
					.serverlist(query)
					.then((res) => {

						this.senDate = true;
						if (res) {

							console.log(res, 999988)
							this.total = res?.data?.count;
							const newlist = res?.data?.list;
							this.list1.push(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}

						} else {

						}
					});
			},
			navTo(item) {

				uni.navigateTo({
					url: `/pages/sys/home/fuwuitemdetail?id=${item.id}`
				});
			},
		}
	};
</script>
<style lang="scss">
	page {
		background: #EEF2F3;
	}
</style>
<style lang="scss" scoped>
	.servicelist {
		padding-bottom: 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.item {
		padding: 24rpx 24rpx 32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 16rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 15rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6B6D72;

				.text0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FD3E2E;
				}

				.text1 {
					margin-top: 5rpx;
				}
			}
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6B6D72;
				flex: 1;
				margin-right: 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.right {
				width: 160rpx;
				height: 56rpx;

				// background: #00B9A7;
				/deep/ .u-size-default {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx !important;
					color: #00B9A7;
					line-height: 33rpx;
					height: 57rpx;
				}

				/deep/ .u-btn--primary {
					color: #FFFFFF !important;

					background: #00B9A7 !important;
					border-radius: 32rpx;
				}
			}
		}
	}
</style>